<template>
<!-- 添加供应商 -->
  <div class="article-manager video-icon form-submit" id="shopp-manager">
    <div class="i-layout-page-header">
      <PageHeader class="product_tabs" hidden-breadcrumb>
        <div slot="title" class="acea-row row-middle">
          <router-link :to="{ path: `${roterPre}/supplier/customer-information/list` }">
            <div class="font-sm after-line">
              <span class="iconfont iconfanhui"></span>
              <span class="pl10">返回</span>
            </div>
          </router-link>
          <span
            v-text="$route.params.id ? '编辑客户资料' : '添加客户资料'"
            class="mr20 ml16"
          ></span>
        </div>
      </PageHeader>
    </div>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <Form
        class="formValidate mt20"
        ref="formValidate"
        :rules="ruleValidate"
        :model="formValidate"
        :label-width="width"
        :label-position="labelPosition"
        @submit.native.prevent
      >
        <Row :gutter="24" type="flex">

          <Col span="24">
            <FormItem label="公司名称(中)：" prop="company_name">
              <Input
                v-model="formValidate.company_name"
                placeholder="请输入公司名称(中)"
                v-width="460"
              />
            </FormItem>
          </Col>

          <Col span="24">
            <FormItem label="公司名称(英)：" prop="company_name_en">
              <Input
                  v-model="formValidate.company_name_en"
                  placeholder="公司名称(英)"
                  v-width="460"
              />
            </FormItem>
          </Col>

          <!-- <Row :gutter="24" type="flex"> -->
          <Col span="24">
            <FormItem label="联系人姓名：" prop="contacts">
              <Input
                v-model="formValidate.contacts"
                placeholder="请输入联系人姓名"
          v-width="460"
              />
            </FormItem>
          </Col>
          <!-- </Row> -->

          <Col span="24">
            <FormItem label="联系电话：" prop="phone">
              <Input
                v-model="formValidate.phone"
                placeholder="请输入联系电话"
               v-width="460"
              />
            </FormItem>
          </Col>

          <Col span="24">
            <FormItem label="联系邮箱：" prop="email">
              <Input
                  v-model="formValidate.email"
                  placeholder="请输入联系邮箱"
                  v-width="460"
              />
            </FormItem>
          </Col>

      
          <Col span="24">
            <FormItem label="国家地址" prop="addressSelect">
              <Cascader
                :data="addresData"
               
                v-model="formValidate.addressSelect"
                @on-change="addchack"
				change-on-select
                v-width="460"
              ></Cascader>
            </FormItem>
          </Col>
<!--        <Col span="24">
            <FormItem label="供应商地址：" prop="detailed_address">
              <Input
                v-model="formValidate.address"
                placeholder="请输入供应商地址"
             v-width="460"
              />
            </FormItem>
          </Col> -->

          <Col span="24">
            <FormItem label="主营产品：" prop="product">
              <Input
                v-model="formValidate.product"
                placeholder="请输入主营产品"
               v-width="460"
              />
            </FormItem>
          </Col>
		  
		  <Col span="24">
		    <FormItem label="微信群ID：" prop="wx">
		      <Input
		        v-model="formValidate.wx"
		        placeholder="请输入微信群ID"
		       v-width="460"
		      />
		    </FormItem>
		  </Col>
        </Row>
      </Form>
    </Card>
    <Card
      :bordered="false"
      dis-hover
      class="fixed-card"
      :style="{ left: `${!menuCollapse ? '200px' : isMobile ? '0' : '80px'}` }"
    >
      <Form>
        <FormItem>
          <Button
            type="primary"
            class="submission"
            @click="handleSubmit('formValidate')"
            >保存</Button
          >
        </FormItem>
      </Form>
    </Card>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import { getCustomerInformation, addSupplier, putSupplier,createCustomerInformationApi } from '@/api/supplier'
import { cityApi,areaInfoApi,allAreaInfoApi } from '@/api/store'
import Setting from "@/setting";
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      roterPre: Setting.roterPre,
      width: 150,
      addresData: [],
      formValidate: {
        merchants:'',
        company_name: '',
        company_name_en: '',
        contacts: '',
        phone: '',
        email: '',
        address: '',
        product: '',
        wx: '',
        status: 0,
        // follow_up_info: '',
		follow_up_info: [''], // 初始一条空数据
		addressSelect: [],
		province: 0,
		city: 0,
		area: 0,
		street: 0,
      },
      ruleValidate: {
		company_name: [
		  {
		    required: true,
		    message: '公司名称(中)不能为空',
		    trigger: 'blur',
		  },
		],
		contacts: [
		  {
		    required: true,
		    message: '联系人姓名不能为空',
		    trigger: 'blur',
		  },
		],
        // addressSelect: [
        //   {
        //     required: true,
        //     message: '请选择省市区',
        //     trigger: 'blur',
        //   },
        // ],
		addressSelect: [
		  {
		    required: true,
		    type: 'array', // 明确告诉 iView 这是数组
		    min: 1, // 至少选择一个
		    message: '请选择省市区',
		    trigger: 'change'
		  }
		],
        pwd: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur',
          },
        ],
        conf_pwd: [
          {
            required: true,
            message: '密码不能为空',
            trigger: 'blur',
          },
        ],
        warehouse_type:[
          {
            required: true,
            message: '仓储类型必填',
            trigger: 'blur',
          },
        ],
        freight_price:[
          {
            required: true,
            message: '出库费用必填',
            trigger: 'blur',
          },
        ],
      },
    }
  },
  computed: {
    ...mapState('admin/layout', ['isMobile', 'menuCollapse']),
    labelPosition() {
      return this.isMobile ? 'top' : 'right'
    },
  },
  watch: {},
  created() {
    let data = { pid: 0,id:1 }
    this.cityInfo(data)
    if (this.$route.params.id) {
      this.getSupplier()
    }
  },
  mounted() {},
  methods: {
	addFollowUp() {
	    this.formValidate.follow_up_info.push('');
	},
	removeFollowUp(index) {
	    this.formValidate.follow_up_info.splice(index, 1);
	},  
    // 获取省市区
    cityInfo(data) {
      allAreaInfoApi(data).then((res) => {
        this.addresData = res.data
      })
    },
    // loadData(item, callback) {
    //   item.loading = true
    //   areaInfoApi({ pid: item.value }).then((res) => {
    //     item.children = res.data
    //     item.loading = false
    //     callback()
    //   })
    // },
    // 选择省市区
    addchack(e, selectedData) {
      e.forEach((i, index) => {
        if (index == 0) {
          this.formValidate.province = i
        } else if (index == 1) {
          this.formValidate.city = i
        } else if (index == 2) {
          this.formValidate.area = i
        } else {
          this.formValidate.street = i
        }
      })
      let addressInfo = [];
      selectedData.forEach(item => {
        addressInfo.push(item.label)
      })
      this.formValidate.address = addressInfo.join('');
    },
    // 添加供应商
    // handleSubmit() {
    //   if (this.$route.params.id) {
    //     createCustomerInformationApi(this.$route.params.id,this.formValidate)
    //       .then(async (res) => {
    //            this.$Message.success(res.msg)
				// this.$router.push({ path: this.roterPre + '/supplier/customer-information/list' })
    //       })
    //       .catch((res) => {
    //         this.$Message.error(res.msg)
    //       })
    //   } else {
    //     createCustomerInformationApi(0,this.formValidate)
    //       .then(async (res) => {
    //         this.$Message.success(res.msg)
    //         this.$router.push({ path: this.roterPre + '/supplier/customer-information/list' })
    //       })
    //       .catch((res) => {
    //         this.$Message.error(res.msg)
            
    //       })
    //   }
    // },
	handleSubmit() {
	  this.$refs.formValidate.validate((valid) => {
	    if (valid) {
	      // 表单验证通过，执行提交逻辑
	      if (this.$route.params.id) {
	        createCustomerInformationApi(this.$route.params.id, this.formValidate)
	          .then((res) => {
	            this.$Message.success(res.msg)
	            this.$router.push({ path: this.roterPre + '/supplier/customer-information/list' })
	          })
	          .catch((res) => {
	            this.$Message.error(res.msg)
	          })
	      } else {
	        createCustomerInformationApi(0, this.formValidate)
	          .then((res) => {
	            this.$Message.success(res.msg)
	            this.$router.push({ path: this.roterPre + '/supplier/customer-information/list' })
	          })
	          .catch((res) => {
	            this.$Message.error(res.msg)
	          })
	      }
	    } else {
	      this.$Message.error('请填写完整的必填信息！')
	    }
	  })
	},
    // 获取供应商信息
    getSupplier() {
      getCustomerInformation(this.$route.params.id)
        .then(async (res) => {
        this.formValidate = res.data.info
		let info = res.data.info
          let addressSelect = []
          if (res.data.info.province) {
            addressSelect.push(res.data.info.province)
          }
          if (res.data.info.city) {
            addressSelect.push(res.data.info.city)
          }
          if (res.data.info.area) {
            addressSelect.push(res.data.info.area)
          }
          if (res.data.info.street) {
            addressSelect.push(res.data.info.street)
          }
          this.formValidate.addressSelect = addressSelect
        })
        .catch((res) => {
          this.$Message.error(res.msg)
        })
    },
  },
}
</script>
<style scoped lang="less">
.fixed-card {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 200px;
  z-index: 99;
  box-shadow: 0 -1px 2px rgb(240, 240, 240);
}
.submission {
  margin-left: 50%;
}
</style>